<template>
	<view class="energy-consumption-container">
		<view class="title">
			<view class="left-title">用途占比</view>
			<view class="btn">

				<picker @change="datePickerChange" mode="date" :value="dateNow" range-key="label">
					<view class="uni-input">{{dateNow}}</view>
				</picker>
			</view>
		</view>
		<view class="content" v-if="showUse">
			<l-echart ref="chartRef" @finished="init"></l-echart>
			<view class="total">
				<view class="num">{{useList.num}}</view>
				<view class="txt">{{chartTitle}}</view>

			</view>
		</view>
		<view v-else>
			<view class="">
				<uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>

			</view>
		</view>
	</view>
</template>

<script setup>
	// #ifdef H5
	import * as echarts from '@/node_modules/echarts/dist/echarts.esm.js';
	// #endif
	import {
		tradtionWaterRatio,


		reqWaterPro,
		reqElePro,
		reqGasPro,
		reqWeightPro,
	} from "@/api/model/trandition"
	import {
		onMounted,
		reactive,
		computed,
		ref,
		watch,
	} from "vue";
	import {
		color,
		backgroundColor
	} from "@/utils/allData"
	import {
		reqOrder
	} from "@/api/model/chargingStation"
	const props = defineProps({
		activeTraditionId: {
			type: String,
			defaule: () => ""
		}
	})
	const current = ref(0)

	const list = ref(['日', '月', '年', '总'])
	const activeIndex = ref(0)
	const dateIndex = ref(0)
	const dateNow = ref(null)
	const showUse = ref(null)
	let chartTitle = ref('')
	const option1 = {
		legend: {},
		grid: {
			top: '1%'
		},
		tooltip: {
			// 鼠标悬浮提示框显示 X和Y 轴数据
			trigger: "axis",
			backgroundColor: "rgba(32, 33, 36,.7)",
			borderColor: "rgba(32, 33, 36,0.20)",
			borderWidth: 1,
			textStyle: {
				// 文字提示样式
				color: "#fff",
				fontSize: "12",
			},
		},
		xAxis: {
			type: "category",
			data: [],
			axisLabel: {
				formatter: function(value) {
					// 限制显示前4个字符，超过部分用省略号表示
					return value.length > 4 ?
						value.substring(0, 4) + "..." :
						value;
				},
			},
		},
		yAxis: {
			name: "笔",
			type: "value",
		},
		series: [],
	}
	const useList = ref({})

	const propOption = {
		color: [],
		tooltip: {
			trigger: "item",
		},
		legend: {
			show: false,
		},
		series: [],
	}
	//获取日期
	const getDate = (type) => {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		dateNow.value = `${year}`
		return `${year}-${month}-${day}`;
	}
	//日期选中
	const datePickerChange = (e) => {
		let year = e.detail.value.split('-')[0]
		dateNow.value = year
		getUse(year)
	}

	// const chartRef = ref < LEchartComponentPublicInstance | null > (null);
	const chartRef = ref(null);
	const init = async () => {
		if (chartRef.value == null) return
		// #ifdef APP
		const chart = await chartRef.value.init(null);
		// #endif
		// #ifdef H5
		const chart = await chartRef.value.init(echarts, null);
		// #endif
		chart.setOption(propOption);
	}
	//根据系统映射名称
	const getMap = () => {
		const map = {
			'water': '用水总量(吨)',
			'ele': '用电总量(kWh)',
			'gas': '用气总量(立方米)',
			'heavy': '用电总量(kWh)',
		}
		chartTitle.value = map[props.activeTraditionId]
	}
	//获取用途占比
	const getUse = (date) => {
		let interfaceMap = {
			'water': reqWaterPro,
			'ele': reqElePro,
			'gas': reqGasPro,
			'heavy': reqWeightPro,
		}
		let typeMap = {
			'water': 2,
			'ele': '',
			'gas': 3,
			'heavy': '',
		}

		interfaceMap[props.activeTraditionId](typeMap[props.activeTraditionId], date).then(({
			data
		}) => {
			var list = [];
			if (data.data.ranking && data.data.ranking.length > 0) {
				showUse.value = true
				data.data.ranking.forEach((item, index) => {
					list.push({
						name: item.parentCode,
						value: (+item.ysl).toFixed(1),
						backgroundColor: backgroundColor[index],
						color: color[index],
					});
				});
				useList.value = {
					num: data.data.total,
					txtName: "用水总量(吨)",
					list: list,
				};
				propOption.color = color;
				propOption.series = [{
					type: "pie",
					radius: ["35%", "65%"],
					data: list,
				}, ];
				init()
			} else {
				showUse.value = false

			}
		});
	}
	onMounted(() => {
		getDate()
		getMap()
		getUse(dateNow.value)


	})
	watch(() => props.activeTraditionId, (val) => {
		console.log("监听的==", val)
		getMap()
		getUse(dateNow.value)
	})
</script>

<style lang="scss" scoped>
	.energy-consumption-container {
		width: 100%;
		border-radius: 10px;
		background-color: #ffffff;
		margin: 20rpx 0;
		padding-bottom: 20rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-title {
				height: 76rpx;
				margin-left: 46rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 76rpx;
			}

			.btn {
				display: flex;
				justify-content: space-between;
				margin-right: 30rpx;
				width: 120rpx;

				.line {
					width: 8rpx;
					background: #909090;
					border-radius: 8rpx;
				}


				::v-deep {
					.uv-subsection__item {
						flex: initial !important;
						/* 使用 !important 强制覆盖组件库的默认样式 */
						width: 70rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						text-align: center;
					}

					.uv-subsection__item--0 {
						.uv-subsection__item__text {
							width: 50rpx;
							border-right: 1px solid #cccccc;
						}
					}
				}
			}

		}

		.content {
			position: relative;

			.echart {
				width: 100%;
				height: 300px;
			}

			.total {
				position: absolute;
				top: 42%;
				left: 37%;
				width: 190rpx;
				text-align: center;
			}
		}
	}
</style>